<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成器</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../scripts/vue.js"></script>
    <script src="../scripts/index.js"></script>
    <script src="../scripts/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>代码生成器</el-header>
        <el-main>
            <el-row>
                <el-col :span="6">
                    <el-input
                            placeholder="请输入表名称"
                            v-model="tableName"
                            @change="getTableData"
                            clearable>
                    </el-input>
                </el-col>
<!--                <el-col :span="6">-->
<!--                    <el-select v-model="optionValue" placeholder="请选择">-->
<!--                        <el-option-->
<!--                                v-for="item in options"-->
<!--                                :key="item.value"-->
<!--                                :label="item.label"-->
<!--                                :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-col>-->
                <el-col :span="6" style="float: right">
                    <el-button icon="el-icon-search" @click="getTableData" :loading="tableLoading" plain>搜索
                    </el-button>
                    <el-button icon="el-icon-download" @click="createCode" type="primary"
                               :loading="createCodeButtonLoading" plain>生成代码
                    </el-button>
                </el-col>
            </el-row>
            <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border
                    stripe
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="tableName"
                        label="表名称">
                </el-table-column>
                <el-table-column
                        prop="engine"
                        label="Engine">
                </el-table-column>
                <el-table-column
                        prop="tableComment"
                        label="表备注">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.currPage"
                        :page-sizes="[10, 30, 50]"
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.totalCount">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
</div>
</body>
<style>
    html, body, #app, .el-container {
        padding: 0;
        margin: 0;
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: #c8c8a9;
        color: #333333;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: #e9eef3;
        color: #333;
        text-align: center;
        line-height: 30px;
    }

    .el-table {
        margin-top: 10px;
    }
</style>
<script>
    new Vue({
        data: {
            tableName: '',
            tableData: [],
            multipleSelection: '',
            page: {
                pageSize: 10,
                totalCount: 0,
                currPage: 1
            },
            options: [{
                value: 'datadev',
                label: 'dep-data-dev'
            }, {
                value: 'datamanager',
                label: 'dep-data-manager'
            }, {
                value: 'sync',
                label: 'dep-data-sync'
            }, {
                value: 'system',
                label: 'dep-system-manager'
            }],
            // optionValue: '',
            //列表加载状态，搜索按钮跟列表加载状态保持一致
            tableLoading: true,
            //生成代码按钮加载状态
            createCodeButtonLoading: false,
        },
        methods: {
            getTableData() {
                const that = this
                that.tableLoading = true
                axios({
                    method: 'get',
                    url: '/sys/generator/list',
                    params: {
                        'limit': that.page.pageSize,
                        'page': that.page.currPage,
                        'order': 'asc',
                        'tableName': that.tableName
                    }
                }).then(function (resp) {
                    that.tableData = resp.data.page.list;
                    that.page = resp.data.page;
                    that.tableLoading = false;
                }).catch(function (err) {
                    console.log(err)
                    that.tableLoading = false;
                })
            },
            //改变页大小
            handleSizeChange(val) {
                const that = this
                that.page.pageSize = val
                that.getTableData();
            },
            //换页
            handleCurrentChange(val) {
                const that = this
                that.page.currPage = val
                that.getTableData();
            },
            //生成代码
            createCode() {
                const that = this
                that.createCodeButtonLoading = true;
                if (that.multipleSelection.length === 0) {
                    that.$message({
                        message: '请至少选择一个表！',
                        center: true,
                        type: 'error',
                        duration: 2000
                    });
                    that.createCodeButtonLoading = false;
                    return;
                }
                axios({
                    method: 'get',
                    url: '/sys/generator/code',
                    responseType: 'blob',
                    params: {
                        // moduleName: that.optionValue,
                        tables: that.multipleSelection
                    }
                }).then(function (resp) {
                    let blob = new Blob([resp.data], {
                        type: "application/application/x-zip-compressed",
                    }); // 2.获取请求返回的response对象中的blob 设置文件类型
                    let url = window.URL.createObjectURL(blob); // 3.创建一个临时的url指向blob对象

                    // 4.创建url之后可以模拟对此文件对象的一系列操作，例如：预览、下载
                    let a = document.createElement("a");
                    a.href = url;
                    a.download = "code.zip";
                    a.click();
                    // 5.释放这个临时的对象url
                    window.URL.revokeObjectURL(url);
                    that.createCodeButtonLoading = false;
                }).catch(function (err) {
                    console.log(err)
                    that.createCodeButtonLoading = false;
                })
            },
            handleSelectionChange(val) {
                const that = this
                const tables = []
                for (const e of val) {
                    tables.push(e.tableName)
                }
                that.multipleSelection = tables.join(',');
            }
        },
        mounted() {
            const that = this
            that.getTableData();
            // that.optionValue = that.options[0].value
        }

    }).$mount('#app')
</script>
</html>